<template>
  <div style="text-align: left;margin-left: 30px">
    <div style="margin: 20px auto 20px">
      <el-page-header @back="goBack" content="创建单一接口用例"></el-page-header>
    </div>
    <div class="dialog-footer" style="display:flex;margin-top: 20px">
      <!--用例全部信息-->
      <div style="flex: 2">
        <el-button type="primary" @click="singCaseAdd()">提 交</el-button>
        <el-tabs value="first" type="card" style="margin-top: 20px">
          <!--用例信息-->
          <el-tab-pane label="用例信息" name="first">
            <el-form :model="caseInfo" inline label-width="80px" style="width: 600px" label-position="right">
              <el-form-item label="用例名称">
                <el-input v-model="caseInfo.name" clearable style="width: 400px"></el-input>
              </el-form-item>
              <el-form-item label="所属项目">
                <el-select style="width: 400px" v-model="caseInfo.belong_project" filterable placeholder="请选择项目">
                  <el-option v-for="item in projectList" :key="item.pk" :label="item.fields.project_name" :value="item.pk"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所属模块">
                <el-select style="width: 400px" v-model="caseInfo.belong_module" filterable placeholder="请选择模块">
                  <el-option v-for="item in moduleList" :key="item.pk" :label="item.fields.module_name" :value="item.pk"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <!--用例变量等信息-->
          <el-tab-pane label="公共变量" name="second">
            <div style="margin:10px auto 10px">
              <el-button type="primary" size='small' @click="addVariables()">添加变量</el-button>
              <el-button type="primary" size='small' @click="delVariables()">批量删除</el-button>
            </div>
            <!--用例信息base_url-->
            <div style="margin:5px auto 10px">
              <h3 style="margin:10px auto 10px">Base_url:</h3>
              <el-input v-model="caseInfo.request.base_url" clearable style="width: 400px">
                <template slot="prepend">Http://</template>
              </el-input>
            </div>
            <!--Variables信息-->
            <div style="margin:10px auto 10px">
              <h3 style="margin:10px auto 10px">变量(Variables):</h3>
              <el-table :data="caseInfo.request.variables" @selection-change="selectChange">
                <!--Variables请求数据选择项-->
                <el-table-column type="selection"></el-table-column>
                <!--Variables请求数据key值-->
                <el-table-column label="Key">
                  <template slot-scope="scope">
                    <el-input style="width: 300px" v-model="scope.row.Key"></el-input>
                  </template>
                </el-table-column>
                <!--Variables请求数据类型-->
                <el-table-column label="Type">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.Type">
                      <el-option v-for="item in dataTypes" :label="item" :value="item"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <!--Variables请求数据value值-->
                <el-table-column label="Value">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.Value" style="width: 300px"></el-input>
                  </template>
                </el-table-column>
                <!--Variables请求数据操作-->
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button @click.native.prevent="deleteRow(scope.$index,caseInfo.request.variables)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <!--用例请求数据-->
          <el-tab-pane label="请求信息" name="third">
            <el-form inline :model="caseInfo">
              <el-form-item label="URL">
                <el-input v-model="caseInfo.request.url"></el-input>
              </el-form-item>
              <el-form-item label="Method">
                <el-select v-model="caseInfo.request.method">
                  <el-option v-for="item in reqMethods" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
              <div class="interval">
                <el-button type="primary" @click="addData()">新增Data</el-button>
                <el-button type="primary" @click="delData()">删除Data</el-button>
                <el-button type="primary" @click="addHeaders()">新增Headers</el-button>
                <el-button type="primary" @click="delHeaders()">删除Headers</el-button>
              </div>
              <!--data请求数据-->
              <div>
                <h3>Data(json):</h3>
                <el-table :data="caseInfo.request.json" @selection-change="selectChange">
                  <!--data请求数据选择项-->
                  <el-table-column type="selection"></el-table-column>
                  <!--data请求数据key值-->
                  <el-table-column label="Key">
                    <template slot-scope="scope">
                      <el-input style="width: 300px" v-model="scope.row.Key"></el-input>
                    </template>
                  </el-table-column>
                  <!--data请求数据类型-->
                  <el-table-column label="Type">
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.Type">
                        <el-option v-for="item in dataTypes" :label="item" :value="item"></el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <!--data请求数据value值-->
                  <el-table-column label="Value">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Value" style="width: 300px"></el-input>
                    </template>
                  </el-table-column>
                  <!--data请求数据操作-->
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button @click.native.prevent="deleteRow(scope.$index,caseInfo.request.json)" type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!--headers请求数据-->
              <div>
                <h3>Headers:</h3>
                <el-table :data="caseInfo.request.headers" @selection-change="selectChange">
                  <!--headers请求数据选择项-->
                  <el-table-column type="selection"></el-table-column>
                  <!--headers请求数据key值-->
                  <el-table-column label="Key">
                    <template slot-scope="scope">
                      <el-input style="width: 300px" v-model="scope.row.Key"></el-input>
                    </template>
                  </el-table-column>
                  <!--headers请求数据value值-->
                  <el-table-column label="Value">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Value" style="width: 300px"></el-input>
                    </template>
                  </el-table-column>
                  <!--headers   请求数据操作-->
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button @click.native.prevent="deleteRow(scope.$index,caseInfo.request.headers)" type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form>
          </el-tab-pane>
          <!--用例断言等信息-->
          <el-tab-pane label="断言" name="forth">
            <div>
              <el-button type="primary" size='small' @click="addValidate()">添加断言</el-button>
              <el-button type="primary" size='small' @click="delValidate()">批量删除断言</el-button>
            </div>
            <!--validate信息-->
            <div style="margin-top: 20px">
              <h3>断言（Validate）:</h3>
              <el-table :data="caseInfo.request.validate" @selection-change="selectChange">
                <el-table-column type="selection"></el-table-column>
                <el-table-column label="Check">
                  <template slot-scope="scope">
                    <el-input style="width: 300px" v-model="scope.row.Check"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="Comparator">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.Comparator">
                      <el-option v-for="item in comparators" :label="item" :value="item"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="Type">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.Type">
                      <el-option v-for="item in dataTypes" :label="item" :value="item"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="Expect">
                  <template slot-scope="scope">
                    <el-input style="width: 300px" v-model="scope.row.Expect"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="删除">
                  <template slot-scope="scope">
                    <el-button @click.native.prevent="deleteRow(scope.$index,caseInfo.request.validate)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!--用例配置-->
      <div style="flex: 1;text-align: left; margin: 40px 20px">
        <el-tabs value="first" type="card" style="margin-top: 20px">
          <!--debugtalk编辑区-->
          <el-tab-pane label="Debugtalk" name="first">
            <label>
              <textarea style="background: black;color: white;width: 100%" rows="30" cols="40" v-model="debugtalkInfo.debugtalk"></textarea>
            </label>
          </el-tab-pane>
          <!--.env编辑区-->
          <el-tab-pane label="Env" name="second">
            <label>
              <textarea style="background: black;color: white;width: 100%" rows="30" cols="40" v-model="envInfo.content"></textarea>
            </label>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>

export default {
    name: "caseAdd",
    data() {
        return {
            moduleId: '', //用例所属的模块id值
            projectList: [],
            moduleList: [],
            reqMethods: ["GET", "POST", "PUT", "DELETE"],
            dataTypes: ['int', 'float', 'string', 'boolean'],
            comparators: ["equals", 'contains', 'startswith', 'endswith', 'less_than'],
            selectItem: [], //选择项目
            caseInfo: {
                name: "单一接口用例",
                typeCase: "single",
                belong_project: "",
                belong_module: "",
                author: "",
                request: {
                    base_url: '127.0.0.1:8000',
                    url: "/api/login/",
                    method: "GET",
                    headers: [
                        {
                            Key: "Content-Type",
                            Value: "application/json",
                        }
                    ],
                    json: [
                        {
                            Key: "username",
                            Type: "string",
                            Value: "admin",
                        },
                        {
                            Key: "password",
                            Type: "string",
                            Value: "123456",
                        }
                    ],
                    validate: [
                        {
                            Check: "status_code",
                            Comparator: "equals",
                            Type: "int",
                            Expect: 200,
                        }
                    ],
                    variables: [
                        {
                            Key: "1234",
                            Type: "string",
                            Value: "1234",
                        }
                    ],
                },
            },
            debugtalkInfo: {
                id: '',
                belong_module: '',
                belong_project: '',
                debugtalk: '',
            },
            envInfo: {
                id: '',
                belong_module: '',
                belong_project: '',
                content: '',
            },
        }
    },
    methods: {
        getProjectList() {
            this.moduleId = this.$route.query.moduleId;
            //获取项目信息
            this.$axios.get("/api/projectList/", {params: {'moduleId': this.moduleId, 'type': 'caseAdd'}})
                .then(res => {
                    console.log('获取项目：');
                    console.log(res.data.projectList);
                    this.projectList = res.data.projectList;
                })
        },
        getModuleList(projectId) {
            //获取模块信息
            this.$axios.get("/api/moduleList/", {params: {'projectId': projectId, 'moduleId': this.moduleId, 'type': 'caseAdd'}})
                .then(res => {
                    console.log('获取模块：');
                    console.log(res.data.moduleList);
                    this.moduleList = res.data.moduleList;
                })
        },
        deleteRow(index, rows) {
            rows.splice(index, 1)
        },
        addData() {
            this.caseInfo.request.json.push(
                {
                    Key: "1234",
                    Type: "string",
                    Value: "1234",
                }
            )
        },
        delData() {
            console.log("删除选择项目：");
            for (let i = 0; i < this.selectItem.length; i++) {
                let index = this.caseInfo.request.json.indexOf(this.selectItem[i]);
                if (index > -1) {
                    this.caseInfo.request.json.splice(index, 1);
                }
            }
        },
        addValidate() {
            this.caseInfo.request.validate.push(
                {
                    Check: "",
                    Comparator: "",
                    Type: "",
                    Expect: "",
                }
            )
        },
        delValidate() {
            console.log("删除选择项目：");
            for (let i = 0; i < this.selectItem.length; i++) {
                let index = this.caseInfo.request.validate.indexOf(this.selectItem[i]);
                if (index > -1) {
                    this.caseInfo.request.validate.splice(index, 1);
                }
            }
        },
        addVariables() {
            this.caseInfo.request.variables.push(
                {
                    Key: "1234",
                    Type: "string",
                    Value: "1234",
                }
            )
        },
        delVariables() {
            console.log("删除variables：");
            for (let i = 0; i < this.selectItem.length; i++) {
                let index = this.caseInfo.request.variables.indexOf(this.selectItem[i]);
                if (index > -1) {
                    this.caseInfo.request.variables.splice(index, 1);
                }
            }
        },
        addHeaders() {
            this.caseInfo.request.headers.push({
                Key: "1234",
                Value: "1234",
            })
        },
        delHeaders() {
            console.log("删除选删除请求头信息：");
            for (let i = 0; i < this.selectItem.length; i++) {
                let index = this.caseInfo.request.headers.indexOf(this.selectItem[i]);
                if (index > -1) {
                    this.caseInfo.request.headers.splice(index, 1);
                }
            }
        },
        selectChange(selection) {
            this.selectItem = selection;
            console.log("获取选择项目：");
            console.log(this.selectItem)

        },
        singCaseAdd() {
            console.log("添加用例");
            this.$axios.post('api/caseAdd/', {'type': 'single', 'caseInfo': this.caseInfo, 'debugTalkInfo': this.debugtalkInfo, 'envInfo': this.envInfo})
                .then(res => {
                    if (res.data.msgCode === "1") {
                        console.log("添加用例成功");
                        this.$router.back()
                    }
                })
                .catch(error => {
                    console.log(error)
                })
        },
        //获取debugtalk内容
        getDebugtalkInfo(moduleId) {
            this.$axios.get('/api/debugtalk/', {params: {'moduleId': moduleId}})
                .then(res => {
                    console.log('获取debugtalk信息：');
                    console.log(res.data);
                    this.debugtalkInfo = res.data.debugtalkInfo
                });
        },
        //获取env内容
        getEnvInfo(moduleId) {
            this.$axios.get('/api/envInfo/', {params: {'moduleId': moduleId}})
                .then(res => {
                    console.log('获取env信息：');
                    console.log(res.data);
                    this.envInfo = res.data.envInfo
                });
        },

        goBack() {
            console.log('go back');
            this.$router.back();
        }
    },
    watch: {
        "caseInfo.belong_project":
            {
                handler(newVal, oldVal) {
                    console.log(newVal);
                    console.log(oldVal);
                    this.getModuleList(newVal)
                }
            },
        deep: true,
    },
    created() {
        this.getProjectList();
        console.log(`模块Id为：${this.moduleId} `);
        if (this.$route.fullPath.indexOf('moduleId') !== -1) {
            this.getDebugtalkInfo(this.moduleId);
            this.getEnvInfo(this.moduleId);
        }
    },
}
</script>

<style scoped>
  .interval {
    margin: 10px auto;
  }
</style>
